<template>
  <div class="info-container">
    <el-card style="height: 100%">
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="tree">
            <el-tree
              :data="dataGroup"
              :props="defaultProps"
              accordion
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>
        <el-col :span="21">
          <div style="height: 92%">
            <search-tool @onSearch="handleSearch"></search-tool>
            <el-table
              v-loading="loading"
              :data="tableData"
              style="width: 100%; position: relative"
              height="100%"
            >
              <el-table-column label="序号" type="index" />
              <el-table-column prop="patrolPointType" label="巡检点类型">
              </el-table-column>
              <el-table-column prop="patrolPerson" label="巡检人员	">
              </el-table-column>
              <el-table-column prop="patrolMonitor" label="巡检班长">
              </el-table-column>
              <el-table-column prop="patrolStartTime" label="开始时间">
              </el-table-column>
              <el-table-column prop="patrolEndSTime" label="结束时间">
              </el-table-column>
              <el-table-column prop="handleResult" label="巡检结果">
              </el-table-column>
              <el-table-column prop="fileInfo.fileUrl" label="巡检图片">
                <span id="num">{{ srcList.length }}</span>
                <div id="pollingImg">
                  <div class="demo-image__preview" style="height: 100%">
                    <el-image
                      :src="url"
                      style="height: 60px"
                      :preview-src-list="srcList"
                      :initial-index="1"
                      fit="cover"
                    />
                  </div>
                </div>
              </el-table-column>
              <el-table-column prop="handleTime" label="处置时间">
              </el-table-column>
              <el-table-column prop="handlePerson" label="处置人">
              </el-table-column>
              <el-table-column label="操作">
                <template #default="{ row }">
                  <div class="action-row">
                    <button
                      v-if="row.handleTime != null ? true : false"
                      class="Regbtn"
                      @click="handleRegist(row)"
                    >
                      登记
                    </button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 20]"
        :page-size="size"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <register-diaog
      :title="dialogRegTitle"
      :rowData="curRowDataReg"
      v-model:visible="visibleDialogRef"
      @onReload="reloadPageReg"
      @onCloes="onCloes"
    ></register-diaog>
  </div>
</template>

<script setup>
import { ref, reactive, defineComponent, watch } from 'vue'
import SearchTool from './components/SearchTool/index.vue'
import registerDiaog from './components/RegisterDialog/index'
import { photaQuery } from '@/api/monitor'
import { ElMessageBox } from 'element-plus'
import { onBeforeRouteUpdate, beforeRouteLeave, useRoute } from 'vue-router'
import {
  ListInspectionRecord,
  GroupingInspectionRecord,
  ByGroupingSearch,
  ByGroupingIdSearch
} from '@/api/CheckingPoint'
import { message } from '@/utils/message'
//数据相关
const tableData = ref([])
const total = ref(0)
const page = ref(1)
const size = ref(8)
const params = ref({ patrolType: '', pipeName: '', location: '' })
const loading = ref(false)
const visibleDialogRef = ref(false)
const registerBtn = ref(true)
const curRowDataReg = ref({})
const route = useRoute()
const url = ref('')
const dialogRegTitle = ref('')
const dataGroup = ref([])
const srcList = ref([])
const defaultProps = reactive({
  children: 'children',
  label: 'label'
})
// 获取数据的方法
const getListData = async (params) => {
  loading.value = true
  const result = await ListInspectionRecord(params, page.value, size.value)
  //接口图片存放
  srcList.value = result.rows[0].fileList
  url.value = srcList.value.slice(0, 1)
  loading.value = false
  tableData.value = result.rows
  total.value = result.total
}
// 获取分组数据的方法
const getGroupingListData = async (params) => {
  const result = await GroupingInspectionRecord(params)
  dataGroup.value = result
}
getGroupingListData()
// 根据巡检点树查询巡检记录的方法
const getByGroupingSearch = async (data) => {
  console.log('data====', data)
  const result = await ByGroupingSearch(data)
  console.log('点击获取列表数据----', result)
}
const handleNodeClick = async (data) => {
  console.log('data', data)
  if (data.id) {
    let secha = []
    secha.push(data.id)
    loading.value = true
    let result = await ByGroupingIdSearch(secha, page.value, size.value)
    loading.value = false
    tableData.value = result.rows
    total.value = result.total
  }
}
const handleCheck = (data) => {
  console.log(data)
}
const onCloes = () => {
  visibleDialogRef.value = false
  // curRowData.value = {}
}
//查询条件相关
const handleSearch = (paramsData) => {
  console.log(paramsData)
  params.value = paramsData
  let obj = {
    patrolPerson: paramsData.patrolPerson,
    patrolPointType: paramsData.patrolPointType,
    patrolStartTime: paramsData.time[0],
    patrolEndTime: paramsData.time[1]
  }
  console.log(obj)
  getListData(obj)
}
const reloadPageReg = () => {
  getListData(params.value)
  if (visibleDialogRef.value) {
    visibleDialogRef.value = false
  }
}
reloadPageReg()
// 分页相关
/**
 * size 改变触发
 */
const handleSizeChange = (currentSize) => {
  size.value = currentSize
  getListData(params.value)
}

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  page.value = currentPage
  getListData(params.value)
}
const handleRegist = (row) => {
  dialogRegTitle.value = '新增巡检记录'
  curRowDataReg.value = row
  visibleDialogRef.value = true
}
</script>
<style lang="scss" scoped>
.info-container {
  width: 100%;
  height: 100%;
}
.Regbtn {
  width: 53px;
  height: 30px;
  border-radius: 6px;
  opacity: 1;
  border: 1px solid #00c38b;
  background-color: #fff;
  font-size: 14px;
  color: #00c38b;
  &:hover {
    cursor: pointer;
  }
}
.action-row {
  display: flex;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 100%;
  height: 32px;
}
.tree {
  padding: 20px 3px;
  border: 1px solid #d7d7d7;
  height: 100%;
}
#pollingImg {
  width: 75px;
  height: 70px;
  background-color: #f5f7fa;
  margin-bottom: 9px;
  overflow: hidden;
}
#num {
  position: relative;
  top: 2.3rem;
  left: 2.4rem;
}
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
